<template>
  <view class="container">
    <!-- 顶部轮播图 -->
    <swiper 
      autoplay 
      interval="3000" 
      circular 
      indicator-dots
      indicator-color="rgba(255,255,255,0.5)"
      indicator-active-color="#fff"
    >
      <swiper-item v-for="(item, index) in banners" :key="index">
        <image 
          :src="item" 
          mode="widthFix"
          class="banner-img"
        ></image>
      </swiper-item>
    </swiper>

<!-- 视频播放器 -->
    <view class="video-section">
      <text class="section-title">
        <uni-icons type="videocam" size="18" color="#1677ff"></uni-icons> 城市宣传片
      </text>
      <view class="video-container">
        <video 
          :src="videoSource" 
          class="video-player"
          poster="/static/city-video.mp3"
          :controls="true"
          id="cityVideo"
        ></video>
      </view>
    </view>
	
    <!-- 城市介绍 -->
    <view class="city-intro">
      <rich-text :nodes="cityIntro"></rich-text>
    </view>

    <!-- 探索进度 -->
    <view class="progress-box">
      <text class="progress-title">探索进度</text>
      <progress 
        :percent="exploreProgress" 
        show-info 
        stroke-width="4"
        activeColor="#1677ff"
      ></progress>
    </view>

    <!-- 城市选择器 -->
    <view class="picker-box">
      <picker 
        mode="region" 
        @change="handleRegionChange"
        :value="selectedRegion"
      >
        <view class="picker-content">
          <text class="picker-label">当前城市：</text>
          <text class="picker-value">{{ selectedRegion[1] || '选择城市' }}</text>
          <uni-icons type="right" size="16" color="#999"></uni-icons>
        </view>
      </picker>
    </view>

    <!-- 偏好设置 -->
    <view class="preference-box">
      <text class="section-title">探索偏好</text>
      
      <!-- 出行方式选择 -->
      <view class="transport-options">
        <text class="option-label">出行方式：</text>
        <radio-group @change="handleTransportChange">
          <label 
            class="radio-item" 
            v-for="(item, index) in transportModes" 
            :key="index"
          >
            <radio 
              :value="item.value" 
              :checked="selectedTransport === item.value"
            ></radio>
            <text>{{ item.label }}</text>
          </label>
        </radio-group>
      </view>

      <!-- 显示地标设置 -->
      <view class="switch-option">
        <text class="option-label">显示地标景点</text>
        <switch 
          v-model="showLandmarks" 
          @change="handleLandmarkChange"
          color="#1677ff"
        ></switch>
      </view>

      <!-- 探索半径设置 -->
      <view class="slider-option">
        <text class="option-label">探索半径：{{ exploreRadius }}km</text>
        <slider 
          :value="exploreRadius" 
          @change="handleRadiusChange"
          min="1" 
          max="20"
          step="1"
          activeColor="#1677ff"
        ></slider>
      </view>
    </view>

    <!-- 热门景点 -->
    <view class="landmarks-box" v-if="showLandmarks && landmarks.length">
      <text class="section-title">热门地标</text>
      <view class="landmarks-grid">
        <view 
          class="landmark-item" 
          v-for="(item, index) in landmarks" 
          :key="index"
          @click="navigateToLandmark(item)"
        >
          <image :src="item.imgUrl" mode="aspectFill" class="landmark-img"></image>
          <text class="landmark-name">{{ item.name }}</text>
        </view>
      </view>
    </view>

    <!-- 底部操作按钮 -->
    <view class="action-bar">
      <button 
        class="start-btn" 
        @click="startExploration"
        type="primary"
      >
        开始探索
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图数据
      banners: [
        '/static/city1.png',
        '/static/city2.png',
        '/static/city3.jpg',
      ],
      
	  // 背景音乐
	  musicSource: '/static/city-music.mp3',
	  isMusicPlaying: false,
	  audioContext: null,
	  
	  // 视频
	  videoSource: '/static/city-video.mp4',
	  
      // 城市介绍
      cityIntro: `
        <h3 style="color:#333;margin:10px 0;">泉州</h3>
        <p style="color:#666;line-height:1.6;">
          泉州，古称刺桐，是国务院首批历史文化名城、海上丝绸之路起点城市。
          它拥有众多历史文化遗迹，如老君岩、开元寺东西塔等，同时也是一个充满活力的现代城市，
          有着独特的闽南文化和丰富的美食。
        </p>
      `,
      
      // 探索进度
      exploreProgress: 60,
      
      // 选中的地区
      selectedRegion: ['福建省', '泉州市', ''],
      
      // 出行方式
      transportModes: [
        { label: '公交', value: 'bus' },
        { label: '自驾', value: 'drive' },
        { label: '步行', value: 'walk' }
      ],
      selectedTransport: 'bus',
      
      // 是否显示地标
      showLandmarks: true,
      
      // 探索半径
      exploreRadius: 10,
      
      // 地标数据
      landmarks: [
        {
          name: '西街',
          imgUrl: '/static/city5.jpg',
          id: 1
        },
        { 
          name: '老君岩', 
          imgUrl: '/static/city4.jpg',
          id: 2 
        },
        { 
          name: '洛阳桥', 
          imgUrl: '/static/city3.jpg',
          id: 3 
        },
        { 
          name: '清净寺', 
         imgUrl: '/static/city5.jpg',
          id: 4 
        }
      ]
    };
  },
  onLoad() {
    // 初始化音频上下文
    this.initAudio();
  },
  methods: {
    // 初始化音频
    initAudio() {
      this.audioContext = uni.createInnerAudioContext();
      this.audioContext.src = this.musicSource;
      this.audioContext.loop = true;
      this.audioContext.autoplay = false;
    },
    
    // 切换音乐播放状态
    toggleMusic() {
      this.isMusicPlaying = !this.isMusicPlaying;
      if (this.isMusicPlaying) {
        this.audioContext.play();
        uni.showToast({
          title: '背景音乐已开启',
          icon: 'none'
        });
      } else {
        this.audioContext.pause();
        uni.showToast({
          title: '背景音乐已关闭',
          icon: 'none'
        });
      }
    },
    
    // 处理地区选择变化
    handleRegionChange(e) {
      this.selectedRegion = e.detail.value;
      uni.showToast({
        title: `已切换到${e.detail.value[1]}`,
        icon: 'none'
      });
    },
    
    // 处理出行方式变化
    handleTransportChange(e) {
      this.selectedTransport = e.detail.value;
    },
    
    // 处理地标显示切换
    handleLandmarkChange(e) {
      this.showLandmarks = e.detail.value;
    },
    
    // 处理探索半径变化
    handleRadiusChange(e) {
      this.exploreRadius = e.detail.value;
    },
    
    // 导航到地标详情
    navigateToLandmark(item) {
      uni.navigateTo({
        url: `/pages/landmarkDetail/landmarkDetail?id=${item.id}`
      });
    },
    
    // 开始探索
        startExploration() {
          uni.showToast({
            title: '开始探索城市',
            icon: 'none'
          });
          
          // 模拟探索进度增加
          if (this.exploreProgress < 100) {
            this.exploreProgress += 5;
          }
        }
      },
      onUnload() {
        // 页面卸载时停止音乐
        if (this.audioContext) {
          this.audioContext.stop();
          this.audioContext.destroy();
        }
      }
    };
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background-color: #f5f5f5;
}

.banner-img {
  width: 100%;
  height: 200rpx;
  object-fit: cover;
}

.city-intro {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 10rpx;
}

.progress-box {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 10rpx;
}

.progress-title {
  display: block;
  margin-bottom: 10rpx;
  color: #333;
  font-size: 32rpx;
}

.picker-box {
  padding: 0 20rpx;
  background-color: #fff;
  margin-bottom: 10rpx;
}

.picker-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  border-bottom: 1px solid #eee;
}

.picker-label {
  color: #333;
  font-size: 32rpx;
}

.picker-value {
  flex: 1;
  margin: 0 20rpx;
  color: #666;
  text-align: right;
  font-size: 32rpx;
}

.preference-box {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 10rpx;
}

.section-title {
  display: block;
  margin-bottom: 20rpx;
  color: #333;
  font-size: 34rpx;
  font-weight: 500;
}

.transport-options {
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #eee;
}

.option-label {
  display: inline-block;
  margin-right: 20rpx;
  color: #666;
  font-size: 30rpx;
}

.radio-item {
  margin-right: 30rpx;
  color: #666;
  font-size: 30rpx;
}

.switch-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  border-bottom: 1px solid #eee;
}

.slider-option {
  display: flex;
  flex-direction: column;
}

.slider-option .option-label {
  margin-bottom: 10rpx;
}

.landmarks-box {
  padding: 20rpx;
  background-color: #fff;
  margin-bottom: 10rpx;
}

.landmarks-grid {
  display: grid;
  grid-templte-columns: 1fr 1fr;
  gap: 20rpx;
}

.landmark-item {
  border-radius: 8rpx;
  overflow: hidden;
  background-color: #f9f9f9;
}

.landmark-img {
  width: 100%;
  height: 200rpx;
}

.landmark-name {
  display: block;
  padding: 15rpx;
  text-align: center;
  color: #333;
  font-size: 30rpx;
}

.action-bar {
  padding: 20rpx;
  background-color: #fff;
  margin-top: auto;
}

.start-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 34rpx;
}
</style>
